<template>
  <div class="consu">
    <div class="toMke">
      <div class="nav">
        <div class="completestate">
          <van-steps :active="active">
            <van-step>已提交</van-step>
            <van-step>待分诊</van-step>
            <van-step>待接诊</van-step>
          </van-steps>
        </div>
        <button v-text="text" :class="colors"></button>
      </div>
      <div class="note">
        <span>分诊备注</span>
        <div class="note-toMnk">
          <van-row>
            <van-col span="6" class="note-img">
              <img src="https://s1.ax1x.com/2022/11/20/zMRwE6.png" alt="" />
            </van-col>
            <van-col span="15" style="line-height: 30px;" class="note-information"
              >会诊分诊已通过，请届时参加会诊</van-col
            >
          </van-row>
          <van-row class="note-top">
            <van-col span="6" class="note-img">
              <img src="https://s1.ax1x.com/2022/10/18/xrcM7Q.png" alt="" />
            </van-col>
            <van-col span="15" class="note-information"
              >该病人病情复杂，需要多科室专家进行会诊，望尽快分配</van-col
            >
          </van-row>
        </div>
      </div>
      <div class="note">
        <span>预约信息</span>
        <div class="note-toMnk">
          <van-row>
            <van-col span="6" class="note-img">
              <div class="toMnk-img">
                <img src="https://s1.ax1x.com/2022/10/18/xrcK0g.png" alt="" />
              </div>
            </van-col>
            <van-col span="15" class="note-information">
              <p class="toMnk-p1">待分诊</p>
              <p class="toMnk-p2">2018年 8月29日 10:00 红云医疗</p>
            </van-col>
          </van-row>
        </div>
        <div class="note-toMnk no">
          <van-row>
            <van-col span="6" class="note-img">
              <div class="toMnk-img">
                <img src="https://s1.ax1x.com/2022/10/18/xrc1ts.png" alt="" />
              </div>
            </van-col>
            <van-col span="15" class="note-information">
              <p class="toMnk-p1">张薇（13522211114） 求诊方</p>
              <p class="toMnk-p2">市东医院 小儿心内科</p>
            </van-col>
          </van-row>
        </div>
        <div class="note-toMnk">
          <van-row>
            <van-col span="6" class="note-img">
              <div class="toMnk-img">
                <img src="https://s1.ax1x.com/2022/10/18/xrcGpq.png" alt="" />
              </div>
            </van-col>
            <van-col span="15" class="note-information">
              <p class="toMnk-p1">预期接诊方</p>
              <p class="toMnk-p2">新华医院 小儿心内科</p>
            </van-col>
          </van-row>
        </div>
      </div>
      <div class="note">
        <span>患者基本信息</span>
        <div class="note-toMnk">
          <van-row>
            <van-col span="6" class="note-img">
              <span class="Phone">患者姓名</span>
            </van-col>
            <van-col span="15" class="name">刘德焕</van-col>
          </van-row>
        </div>
        <div class="note-toMnk Minus">
          <van-row>
            <van-col span="6" class="note-img">
              <span class="Phone">手机号码</span>
            </van-col>
            <van-col span="15" class="name"
              >18600995544</van-col
            >
          </van-row>
        </div>
      </div>
      <div class="note floot">
        <span>患者病情</span>
        <div class="note-toMnk">
          <van-row>
            <van-col span="6" class="note-img">
              患者信息
            </van-col>
            <van-col span="15" class="info"
              >21个月，男性，120cm，35kg</van-col
            >
          </van-row>
        </div>
        <div class="note-toMnk Minus">
          <van-row>
            <van-col span="6" class="note-img">
              主       诉
            </van-col>
            <van-col span="15" class="note-information"
              >患者患有多动症学习时不专心，上课时专心听课的时间短，对来自各方的刺激都</van-col
            >
          </van-row>
        </div>
        <div class="note-toMnk Minus">
          <van-row>
            <van-col span="6" class="note-img">
              待解问题
            </van-col>
            <van-col span="15" class="note-information"
              >该病人病情复杂，需要多科室专家进行会诊，望尽快分配</van-col
            >
          </van-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "information",
  data() {
    return {
      active: 1,
      text:'取消预约',
      colors:'yellow'
    };
  },
  mounted(){
    // 动态绑定按钮样式
    if(this.active == 1 ){
      this.colors= 'yellow'
    }
  }
};
</script>

<style lang="less" scoped>
.consu {
  height: 50rem;
  background: #f2f2f2;
  box-sizing: border-box;
  padding-top: 0.6875rem;
  .nav {
    height: 8.6875rem;
    border-bottom: 0.0625rem solid #cccccc;

    .completestate {
      width: 98%;
      height: 5.125rem;
      border: .0625rem solid #ccc;
      margin: 0 auto;
      border-radius: 0.3125rem;
      box-sizing: border-box;
     .tate{
      height: 4.375rem;
      border-radius: .3125rem;
     }
    }
    button {
      width: 98%;
      margin: .5625rem 0 0 .25rem;
      border-radius: 0.3125rem;
      height: 2.5rem;
      border: 0;
      color: #fff;
    }
  }
  .note {
    height: 5.625rem;
    span {
      display: inline-block;
      margin: 0.4375rem 0 0.5625rem 0.5625rem;
      color: #999999;
      font-weight: 100;
    }
    .note-toMnk {
      height: 3.5625rem;
      border-top: .125rem solid #cccccc;
      border-bottom: .125rem solid #cccccc;
      background: #fff;
      border-collapse: collapse;

      .toMnk-img {
        width: 2.5625rem;
        height: 2.5rem;
        border: 0.0625rem solid #cccccc;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0.3125rem;
      }
      .toMnk-p1 {
        margin-bottom: .3125rem;
      }
      .toMnk-p2 {
        color: #999999;
      }
      .Phone {
        font-size: .875rem;
      }
      .name {
        padding-top: 1.3125rem;
        height: 3.5625rem;
        box-sizing: border-box;
        color: #1e1e1e;
        font-size: 0.875rem;
      }
    }
    .note-top{
      background: #fff;
      margin-top: 2px;
    }
    .Minus{
        border-top: 0;
    }
    .no {
      border: 0;
    }
    .note-img {
      height: 3.5625rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .note-information {
      height: 3.5625rem;
      box-sizing: border-box;
      padding-top: 0.6875rem;
      color: #1e1e1e;
      font-size: 0.875rem;
    }
  }
  .floot{
    width: 100%;
    height: 16.25rem;
    margin-top: 11.5625rem;
  }
  .info{
    box-sizing: border-box;
    padding-top: 1.375rem;
  }
}
.yellow{
  background: #ff9900;
}
.Lnt{
  background: #199ed8;
}
</style>